/*
 * @Description:配置组件
 * @Author: hyx
 * @Date: 2021-03-19 11:35
 */
// 选择配置
import { computed, defineComponent, PropType } from 'vue'
import { Config, options } from '@/dictionaries/config'
import { isArray } from '@/utils/tools'
import { countryJSON } from '@/assets/json/country'
const Props = {
    value: [String, Number, Array] as PropType<string | number | any[]>,
    label: [String, Number, Array] as PropType<string | number | any[]>,
    prop: {
        type: String as PropType<string>,
        default: 'status',
        required: true,
    },
    disabled: {
        type: Boolean as PropType<boolean>,
        default: false,
    },
    mode: String as PropType<'multiple' | 'tags'>,
    placeholder: String as PropType<string>,
    allowClear: {
        type: Boolean as PropType<boolean>,
        default: true,
    },
} as const
const FormCountry = defineComponent({
    name: 'form-country',
    props: Props,
    emits: ['change', 'update:value', 'update:label'],
    setup(props, { emit }) {
        function onChange(value: number | Array<string>, option?: Config | Config[]) {
            if (isArray(value)) {
                if (option && isArray(option)) {
                    emit(
                        'update:label',
                        option.map((item: Config) => {
                            return item.label
                        })
                    )
                } else {
                    emit('update:label', undefined)
                }
                if (value.length) {
                    emit('update:value', value)
                    emit('change', value)
                } else {
                    emit('update:value', undefined)
                }
            } else {
                if (option && !isArray(option)) {
                    emit('update:value', (option as Config).value)
                    emit('update:label', (option as Config).label)
                    emit('change', (option as Config).value)
                } else {
                    emit('update:value', undefined)
                    emit('update:label', undefined)
                    emit('change', undefined)
                }
            }
        }
        const computeCount = computed(() => {
            return countryJSON.map(item => {
                return {
                    ...item,
                    value: item.cn,
                    label: item.cn
                }
            })
        })
        return () => {
            return (
                <a-select
                    onChange={onChange}
                    mode={props.mode}
                    disabled={props.disabled}
                    allowClear={props.allowClear}
                    value={props.value}
                    placeholder={props.placeholder}
                    options={computeCount.value}
                />
            )
        }
    },
})

export default FormCountry
